import { LoginOutlined, ReloadOutlined, SettingOutlined, UsergroupAddOutlined, UserOutlined } from "@ant-design/icons";
import "./NavigateHeader.css"
import {Avatar, Dropdown, Flex, Layout, type MenuProps, Space, Tag} from "antd";
const { Header } = Layout;

const items: MenuProps['items'] = [
    {
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                用户登录时间：2023-01-01 12:00:00
            </a>
        ),
        key: '0',
        icon: <LoginOutlined />
    },
    {
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                登录过期时间：2023-01-01 12:00:00
            </a>
        ),
        key: '1',
        icon: <LoginOutlined />
    },
    {type: 'divider',},
    {
        label: "重新登录",
        key: '2',
        icon: <ReloadOutlined />
    },
    {
        type: 'divider',
    },
    {
        label: '用户名: admin',
        key: '3',
        disabled: true,
        icon: <UserOutlined />
    },
    {
        label: '用户角色: 超级管理员',
        key: '4',
        disabled: true,
        icon: <UsergroupAddOutlined />
    },
    {
        label: '系统设置',
        key: '5',
        icon: <SettingOutlined />
    },
];

const NavigateHeader = () => {
    return (
       <>
           <Header className={"tomato-header"}>
               <div className="tomato-header-logo">
                   <img className={"logo-icon"}
                        src="https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg"
                        alt="ProComponents" height="40"/>
                   <span className={"logo-title"}>{import.meta.env.VITE_APP_NAME}</span>
               </div>
               <Flex style={{width: "100%"}} justify={"space-between"} gap={10} align={"center"}>
                   <Space>
                       <Tag color={"#3f770b"}>IO_OK</Tag>
                       <Tag color={"#7e0408"}>SQL_OK</Tag>
                       <Tag color={"#880854"}>SERVER_OK</Tag>
                   </Space>
                   <Space size={0}>
                       <Tag color={"green"}>系统管理员</Tag>
                       <Tag color={"green"}>admin</Tag>
                       <Dropdown menu={{ items }}>
                           <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=3" />
                       </Dropdown>
                   </Space>
               </Flex>
           </Header>
           <div className={"tomato-header-placeholder"}></div>
       </>
    );
};

export default NavigateHeader;